{% extends 'base.html' %}

{% block title %}出库操作 - 库存信息管理系统{% endblock %}

{% block content %}
<div class="row">
    <!-- 出库操作表单 -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h4 class="mb-0">物品出库</h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="item_code" class="form-label">物品编号 *</label>
                        <input type="text" class="form-control" id="item_code" name="item_code" required placeholder="请输入要出库的物品编号">
                        <small class="form-text text-muted">可在库存查询页面获取物品编号</small>
                    </div>

                    <div class="mb-3">
                        <label for="quantity" class="form-label">出库数量 *</label>
                        <input type="number" min="1" class="form-control" id="quantity" name="quantity" required>
                    </div>

                    <div class="mb-3">
                        <label for="customer" class="form-label">客户单位 *</label>
                        <input type="text" class="form-control" id="customer" name="customer" required placeholder="请输入客户单位名称">
                    </div>

                    <button type="submit" class="btn btn-danger">确认出库</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 物品信息查询 -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">物品信息查询</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="itemQuery" placeholder="输入物品编号查询详情">
                    <button class="btn btn-secondary mt-2" onclick="queryItem()">查询</button>
                </div>

                <div id="itemInfo" class="d-none">
                    <table class="table table-sm">
                        <tbody>
                            <tr><th style="width: 30%">物品编号:</th><td id="infoCode"></td></tr>
                            <tr><th>物品名称:</th><td id="infoName"></td></tr>
                            <tr><th>规格型号:</th><td id="infoSpec"></td></tr>
                            <tr><th>材质:</th><td id="infoMaterial"></td></tr>
                            <tr><th>单位:</th><td id="infoUnit"></td></tr>
                            <tr><th>单价:</th><td id="infoPrice"></td></tr>
                            <tr><th>当前库存:</th><td id="infoQuantity" class="text-danger fw-bold"></td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 已出库清单 -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">已出库清单</h5>
        <button type="submit" form="exportForm" class="btn btn-success">生成出库清单</button>
    </div>
    <div class="card-body">
        <form id="exportForm" method="POST">
            <input type="hidden" name="generate_excel" value="1">

            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th style="width: 5%"><input type="checkbox" id="selectAll"></th>
                            <th>物品编号</th>
                            <th>物品名称</th>
                            <th>规格型号</th>
                            <th>材质</th>
                            <th>单位</th>
                            <th>单价 (元)</th>
                            <th>出库数量</th>
                            <th>总价值 (元)</th>
                            <th>客户单位</th>
                            <th>出库时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in out_records %}
                        <tr>
                            <td><input type="checkbox" name="record_ids" value="{{ record.id }}"></td>
                            <td>{{ record.item_code }}</td>
                            <td>{{ record.name }}</td>
                            <td>{{ record.specification or '-' }}</td>
                            <td>{{ record.material or '-' }}</td>
                            <td>{{ record.unit }}</td>
                            <td>{{ "%.2f"|format(record.price) }}</td>
                            <td>{{ record.quantity }}{{ record.unit }}</td>
                            <td>{{ "%.2f"|format(record.total_value) }}</td>
                            <td>{{ record.customer }}</td>
                            <td>{{ record.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="11" class="text-center">暂无出库记录</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 全选/取消全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('selectAll');
        const recordCheckboxes = document.querySelectorAll('input[name="record_ids"]');

        selectAllCheckbox.addEventListener('change', function() {
            recordCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
        });

        // 单个复选框变化时更新全选框状态
        recordCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const allChecked = Array.from(recordCheckboxes).every(cb => cb.checked);
                selectAllCheckbox.checked = allChecked;
            });
        });
    });

    // 查询物品信息
    function queryItem() {
        const itemCode = document.getElementById('itemQuery').value.trim();
        if (!itemCode) {
            alert('请输入物品编号');
            return;
        }

        // 在实际应用中，这里应该通过AJAX从服务器获取数据
        // 为简化演示，我们从页面中已有的物品数据中查找
        const items = {{ items|tojson }};
        const item = items.find(i => i.item_code === itemCode);

        const itemInfo = document.getElementById('itemInfo');

        if (item) {
            document.getElementById('infoCode').textContent = item.item_code;
            document.getElementById('infoName').textContent = item.name;
            document.getElementById('infoSpec').textContent = item.specification || '-';
            document.getElementById('infoMaterial').textContent = item.material || '-';
            document.getElementById('infoUnit').textContent = item.unit;
            document.getElementById('infoPrice').textContent = item.price.toFixed(2) + '元';
            document.getElementById('infoQuantity').textContent = item.quantity + item.unit;

            // 显示物品信息
            itemInfo.classList.remove('d-none');

            // 自动填充到出库表单
            document.getElementById('item_code').value = item.item_code;
        } else {
            alert('未找到编号为 ' + itemCode + ' 的物品');
            itemInfo.classList.add('d-none');
        }
    }

    // 支持回车键查询物品
    document.getElementById('itemQuery').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            queryItem();
        }
    });
</script>
{% endblock %}